<div class="alarm-lamp">
  <button (click)="onFadeClick()" mat-icon-button>
    <mat-icon class="lamp" svgIcon="assets:lamp"></mat-icon>
    <span class="tips">{{alarmTotal}}</span>
  </button>
</div>
<section class="alarm-section" [ngClass]="{'alarm-section-show':fadeDiv}">
  <section class="flex">
    <header class="alarm-section-title">
      <span>
        <span class="close-alarm" (click)="onClickCloseAlarm()"></span>
      </span>
      <i (click)="isActive(1)" [class.active1]="active1">设备报警({{alarmTotal}})</i>
      <i (click)="isActive(3)" [class.active3]="active3">升压站({{substationDataTotal}})</i>
      <div class="search">
        <p *ngIf="active1">风场：
          <select (change)="onChangeFarm($event.target.value)">
            <option value="-1">请选择</option>
            <option value="{{farm.farmId}}" *ngFor="let farm of farms">{{farm.farmName}}</option>
          </select>
        </p>
        <p *ngIf="active1">类别：<input type="text" [(ngModel)]="components" placeholder="请输入KR"></p>
        <p *ngIf="active1">描述：<input type="text" [(ngModel)]="desc" placeholder="请输入描述"></p>
      </div>
    </header>
    <section class=" flex-full" [hidden]="active3">
      <section class="alarm-section-summary flex">
        <div class="flex-full">
          <div class="alarm-section-conter">
            <table class="zk-table">
              <thead>
              <tr>
                <th>
                  <span>风场</span>
                </th>
                <th>
                  <span>设备</span>
                </th>
                <th>
                  <span>描述</span>
                </th>
                <th>
                  <span>一级系统</span>
                </th>
                <th>
                  <span>二级系统</span>
                </th>
                <th>
                  <span>三级系统</span>
                </th>
                <th>
                  <span>内容</span>
                </th>
                <th>
                  <span>开始时间</span>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let faultData of alarmList">
                <td>
                  <span> {{faultData.farmName}}</span>
                </td>
                <td>
                  <span> {{faultData.deviceName}}</span>
                </td>
                <td>
                  <span> {{faultData.faultDesc}}</span>
                </td>
                <td>
                  <span> {{faultData.firstModule}}</span>
                </td>
                <td>
                  <span> {{faultData.secondModule}}</span>
                </td>
                <td>
                  <span> {{faultData.thirdModule}}</span>
                </td>
                <td>
                  <span> {{faultData.faultLevelName }}</span>
                </td>
                <td>
                  <span> {{faultData.faultBeginTime }}</span>
                </td>
              </tr>
              <tbody>
            </table>
          </div>
        </div>
      </section>
    </section>
    <!--升压站-->
    <app-substation class="flex-full" #substation [hidden]="active1" (substationDataTotalChange)="onSubstationDataTotalChange($event)">
    </app-substation>
  </section>
</section>
